<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <!-- 导航条 -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand " href="#"><img src="./imgs/Team.svg" alt="" class=".img-responsive"></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">首页</a></li>
          <li><a href="#">博客</a></li>
          <li><a href="#">Github</a></li>
          <li><a href="#" class="hot"><span></span>TWeb Conf</a></li>
          <li><a href="#">SuperStar</a></li>
          <li><a href="#">Web前端导航</a></li>
          <li><a href="#">关于</a></li>

        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <!-- 轮播 -->
  <div id="carousel-example-generic" class="carousel slide " data-ride="carousel" data-interval="2000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./imgs/banner_0.jpg" alt="...">
        <div class="carousel-caption">

        </div>
      </div>
      <div class="item">
        <img src="./imgs/banner_1.png" alt="...">
        <div class="carousel-caption">

        </div>
      </div>
      <div class="item">
        <img src="./imgs/banner_2 (2).jpg" alt="...">
        <div class="carousel-caption">

        </div>
      </div>
      <div class="item">
        <img src="./imgs/banner_3.jpg" alt="...">
        <div class="carousel-caption">

        </div>
      </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- 内容 -->
  <section>
    <!-- 主题文字 -->
    <div class="container">
      <div class="title">
        <h2>
          <span class="small">OpenSource</span> /
          <span>开源项目</span>
          <p>种类众多的开源项目，让你爱不释手</p>
        </h2>
      </div>
    </div>
    <!-- 响应式内容 -->
    <div class="container content">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <div class="img"><img src="./imgs/omi-be3d88.png" alt=""></div>
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <div><img src="./imgs/omi-be3d88.png" alt=""></div>
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <div><img src="./imgs/omi-be3d88.png" alt=""></div>
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <div><img src="./imgs/omi-be3d88.png" alt=""></div>
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>

    </div>

    <div class="more "><a href="#">更多作品></a></div>
  </section>
  <!-- 内容 -->
  <section>
    <!-- 主题文字 -->
    <div class="container">
      <div class="title">
        <h2>
          <span class="small">Product</span> /
          <span>作品</span>
          <p>新奇好玩的作品，让你欲罢不能</p>
        </h2>
      </div>
    </div>
    <!-- 响应式内容 -->
    <div class="container content">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <div class="img"><img src="./imgs/omi-be3d88.png" alt=""></div>
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <div><img src="./imgs/omi-be3d88.png" alt=""></div>
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <div><img src="./imgs/omi-be3d88.png" alt=""></div>
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <div><img src="./imgs/omi-be3d88.png" alt=""></div>
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>

    </div>

    <div class="more "><a href="#">更多作品></a></div>
  </section>

  <!-- 底部 -->
  <footer>
    <div class="container">
      <div class="col-md-5 col-sm-12 footer-info">
        <div class="logo-wrapper">
          <img src="./imgs/Team.svg" alt="">
          <div class="slogan">
            成为地球卓越的Web团队
          </div>
          <p>版权信息</p>
        </div>
      </div>
      <div class="col-md-2 footer-links hidden-xs ">
        <h4>兄弟团队</h4>
        <div class="links">
          <a href="#" class="links-item">腾讯团体</a>
          <a href="#" class="links-item">腾讯团体</a>
          <a href="#" class="links-item">腾讯团体</a>
          <a href="#" class="links-item">腾讯团体</a>
          <a href="#" class="links-item">腾讯团体</a>

        </div>
      </div>
      <div class="col-md-2 footer-links  hidden-xs ">
        <h4>兄弟团队</h4>
        <div class="links">
          <a href="#" class="links-item">腾讯团体</a>
          <a href="#" class="links-item">腾讯团体</a>
          <a href="#" class="links-item">腾讯团体</a>
          <a href="#" class="links-item">腾讯团体</a>
          <a href="#" class="links-item">腾讯团体</a>

        </div>
      </div>
      <div class="col-md-3 col-sm-12 footer-qr ">
        <div class="col-md-6 col-xs-6 qr-item">
          <img src="./imgs/qq-71f7f2.gif" alt="">
        </div>
        <div class="col-md-6 col-xs-6 qr-item">
          <img src="./imgs/qq-71f7f2.gif" alt="">
        </div>


      </div>
    </div>
  </footer>
  <script src="./bootstrap/jqury.js"></script>
  <script src="./bootstrap/js/bootstrap.min.js"></script>
  <script>
    // window.addEventListener('scroll', function () {
    //   const scrollTop = document.documentElement.scrollTop
    //   if (scrollTop < 39) {
    //     document.querySelector('.navbar').style.backgroundColor = 'transparent !important'
    //   }
    // })
    window.addEventListener('scroll', function () {
      const scrollTop = document.documentElement.scrollTop;
      if (scrollTop > 39) {
        document.querySelector('.navbar').style.backgroundColor = 'black';
      } else {
        document.querySelector('.navbar').style.backgroundColor = 'transparent';
      }
    });
  </script>
</body>

</html>